<template>
    <div>
        <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;" >
            <el-radio-button label="first">设备信息</el-radio-button>
            <!--<el-radio-button label="second">水电平衡</el-radio-button>-->
        </el-radio-group>
        <div v-if="tabPosition == 'first'">
            <el-row :gutter="20" style="margin-bottom: 15px">
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        设备名称：{{parenData1.deviceName}}
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        设备编号：{{parenData1.deviceCode}}
                    </div>
                </el-col>
                <!--<el-col :span="8">-->
                    <!--<div class="grid-content bg-purple">-->
                        <!--<img src="../../../assets/img/img.jpg" alt="" style="width: 35px;height: 35px;border-radius: 50%; position: relative;top: -13px;">-->
                    <!--</div>-->
                <!--</el-col>-->
            </el-row>
            <el-row :gutter="20" style="margin-bottom: 15px">
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        状态：{{parenData1.deviceState}}
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        运行状态：{{parenData1.runningStateName}}
                    </div>
                </el-col>
                <!--<el-col :span="8">-->
                    <!--<div class="grid-content bg-purple">-->
                        <!--<el-button type="success" size="mini" style="padding: 3px 15px;">点抄</el-button>-->
                    <!--</div>-->
                <!--</el-col>-->
            </el-row>
            <el-row :gutter="20" style="margin-bottom: 15px">
                <el-col :span="8" v-for="(item,index) in parenData1.deviceRealValueExtend" :key="index">
                    <div class="grid-content bg-purple">
                        {{item.dataName}}：{{item.dataValue}} {{item.dataUnit}}
                        <!--<sup>o</sup>-->
                    </div>
                </el-col>
            </el-row>

            <el-tabs type="border-card">
                <el-tab-pane label="控制区域">
                    <div>
                        <el-button v-for="(item,index) in parenData1.deviceFunctionDtoExtend" :type="index<1?'primary':index>1?'success':'danger'" :key="item.functionId" @click="clickBtn(parenData1,index)">{{item.functionName}}</el-button>
                    </div>
                    <div style="margin-top: 15px;" v-if="connectErrTxt">
                        <el-alert
                                :title="connectErrTxt"
                               style="color: #b94a48;background-color: #f2dede;"
                                :closable="false">
                        </el-alert>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="控制结果">
                    <el-table
                            :data="parenData1.deviceCommandResultExtend"
                            style="width: 100%">
                        <el-table-column
                                prop="createTime"
                                label="下发时间">
                        </el-table-column>
                        <el-table-column
                                prop="finishTime"
                                label="完成时间">
                        </el-table-column>
                        <el-table-column
                                prop="controlName"
                                label="控制名称">
                        </el-table-column>
                        <el-table-column
                                prop="resultStauts"
                                label="控制结果">
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div v-if="tabPosition == 'second'">
            <span class="demonstration">开始时间:</span>
            <el-date-picker
                    v-model="value1"
                    type="datetime"
                    placeholder="选择日期时间">
            </el-date-picker>
            <span class="demonstration" style="margin-left: 15px;">结束时间:</span>
            <el-date-picker
                    v-model="value2"
                    type="datetime"
                    placeholder="选择日期时间">
            </el-date-picker>
            <el-button type="primary" icon="el-icon-search" style="margin-left: 15px;">查询</el-button>
        </div>

    </div>

</template>

<script>
    import {famatDatesTimes} from '../../common/com';
    export default {
        name: "mapEquimentChild",
        props:['parenData1'],
        data(){
            return {
                tabPosition: 'first',
                // tableData: [{
                //     date: '2016-05-02',
                //     name: '王小虎',
                //     address: '上海市普陀区'
                // }, {
                //     date: '2016-05-04',
                //     name: '王小虎',
                //     address: '上海市普陀区'
                // }, {
                //     date: '2016-05-01',
                //     name: '王小虎',
                //     address: '上海市普陀区'
                // }, {
                //     date: '2016-05-03',
                //     name: '王小虎',
                //     address: '上海市普陀区'
                // }],
                value1: '',
                value2:'',
                connectErrTxt:'',
            }
        },
        created(){
            console.log(this.parenData1)
        },

        methods: {
            clickBtn(row, i) {
                // this.dialogTableVisible = true;
                console.log(row)

                var str = 'action,' + row.concentrator + ',' +
                    row.deviceCode + ',' +
                    row.typeId + ',' +
                    '"",' +
                    // row.functions[i].orderNo + ',' +
                    row.deviceFunctionDtoExtend[i].functionName + ',' +
                    row.deviceFunctionDtoExtend[i].functionCode + ',' +
                    row.deviceId;
                console.log(str);

                this.socketApi.sendSock(this, str, (data) => {
                    this.connectErrTxt = JSON.parse(data).message;
                    this.$parent.$parent.getDeviceDetailInfo();
                });
            },
        }
    }
</script>

<style scoped>

</style>